<script lang="jsx" setup>
import { ref } from 'vue';
import * as echarts from 'echarts/core';
import { useEcharts } from '@/hooks/common/echarts';

const { domRef, updateOptions } = useEcharts(
  () => ({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      top: '15%',
      right: '10%',
      bottom: '20',
      left: '10%'
    },
    legend: {
      data: ['字段1', '字段2'],
      right: 'center',
      top: 0,
      textStyle: {
        color: '#fff'
      },
      itemWidth: 12,
      itemHeight: 10
    },
    xAxis: [
      {
        type: 'category',

        data: ['2016', '2017', '2018', '2019'],
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
        axisLabel: {
          textStyle: { color: 'rgba(255,255,255,.7)', fontSize: '14' }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位1',
        splitLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          color: 'rgba(255,255,255,.6)'
        },
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } } // 左线色
      },
      {
        type: 'value',
        name: '单位2',
        show: true,
        axisTick: { show: false },
        axisLabel: {
          show: true,
          formatter: '{value} %',
          color: 'rgba(255,255,255,.6)'
        },
        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, // 右线色
        splitLine: {
          show: true,
          lineStyle: { color: 'rgba(255,255,255,.1)' }
        } // x轴线
      }
    ],
    series: [
      {
        name: '字段1',
        type: 'bar',
        data: [18453.35, 20572.22, 24274.22, 30500.0],
        barWidth: '20%',

        itemStyle: {
          normal: {
            barBorderRadius: 15,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#fccb05'
              },
              {
                offset: 1,
                color: '#f5804d'
              }
            ])
          }
        },
        barGap: '0'
      },
      {
        name: '字段2',
        type: 'line',
        yAxisIndex: 1,

        data: [0, 11.48, 18.0, 25.65],
        lineStyle: {
          normal: {
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: '#ff3300'
          }
        },
        smooth: true
      }
    ]
  }),
  false
);
</script>

<template>
  <div ref="domRef" class="charts h-full w-full"></div>
</template>

<style lang="scss" scoped></style>
